/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* entity */
import Field from '@model/entity/Field'
/* hooks */
import { useFormStyleFontValue } from '@hooks/form/useFormStyle'
/* mixins */
import FormMixin from '@src/component/form/mixin/form'
/* model */
import { FormStyleFont, FormStyleFontSizeEnum, FormStyleFontStyleEnum } from '@model/form/FormStyle'
/* scss */
import '@src/component/form/components/FormStyle/FormStyle.scss'
/* util */
import { uuid } from 'pub-bbx-utils'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, ComputedRef, computed, Ref, ref, ToRefs } from 'vue'
import { CommonComponentInstance } from '@model/VC'

export enum FormStyleFontEventEnum {
  Change = 'change'
}

export type FormStyleFontProps = {
  // 字段
  field?: Field;
  // 值
  value: ToRefs<FormStyleFont> | undefined
}

export interface FormStyleFontSetupState {
  fontStyles: ComputedRef<FormStyleFontStyleEnum[]>
  formStyleFontValue: ToRefs<FormStyleFont>
  changedFontSizeHandler: (value: FormStyleFontSizeEnum) => void
  changedFontStyleHandler: (value: FormStyleFontStyleEnum[]) => void
}

export type FormStyleFontInstance = ComponentInstance & FormStyleFontSetupState
export type FormStyleFontVM = ComponentRenderProxy<FormStyleFontProps> & CommonComponentInstance

const FormStyleFontSizeList = [FormStyleFontSizeEnum.Twelve, FormStyleFontSizeEnum.Fourteen, FormStyleFontSizeEnum.Sixteen]
const FormStyleFontStyleList = [FormStyleFontStyleEnum.Bold]

export default defineComponent<FormStyleFontProps, FormStyleFontSetupState>({
  name: ComponentNameEnum.FormStyleFont,
  mixins: [FormMixin],
  props: {
    value: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props: FormStyleFontProps, { emit }) {
    
    const formStyleFontValue: ToRefs<FormStyleFont> = useFormStyleFontValue(props)
    
    const changedFontSizeHandler = (value: FormStyleFontSizeEnum) => {
      formStyleFontValue.fontSize.value = value
      emitChangeHandler()
    }
    
    const changedFontStyleHandler = (value: FormStyleFontStyleEnum[]) => {
      formStyleFontValue.isBold.value = value.includes(FormStyleFontStyleEnum.Bold)
      emitChangeHandler()
    }
    
    const emitChangeHandler = () => {
      emit(FormStyleFontEventEnum.Change, formStyleFontValue)
    }
    
    const fontStyles: ComputedRef<FormStyleFontStyleEnum[]> = computed(() => {
      if (formStyleFontValue.isBold.value) {
        return [FormStyleFontStyleEnum.Bold]
      }
      
      return []
    })
    
    return {
      fontStyles,
      formStyleFontValue,
      changedFontSizeHandler,
      changedFontStyleHandler
    }
  },
  render() {
    return (
      <div class="form-style-font">
        
        <el-dropdown type="primary" trigger="click">
          <el-button type="primary">
            { `${this.formStyleFontValue.fontSize.value}px` } 
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
              {
                FormStyleFontSizeList.map((fontSize: FormStyleFontSizeEnum) => {
                  return (
                    <el-dropdown-item key={uuid()}>
                      <div onClick={() => this.changedFontSizeHandler(fontSize)}>
                        { `${fontSize}px` }
                      </div>
                    </el-dropdown-item>
                  )
                })
              }
          </el-dropdown-menu>
        </el-dropdown>
        
        <el-checkbox-group
          value={this.fontStyles} 
          onInput={this.changedFontStyleHandler}
        >
          {
            FormStyleFontStyleList.map((item: string) => {
              return (
                <el-checkbox-button label={item}>
                  { item }
                </el-checkbox-button>
              )
            })
          }
        </el-checkbox-group>
        
      </div>
    )
  }
})
